@import (reference) "../../../trade.less";
.trade-chart-modal(
  @background-color, @main-font-color, @second-font-color, @border-color, @hover-background-color
) {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 460px;
  left: calc(50% - 230px);
  height: calc(100% - 40px);
  bottom: 20px;
  background-color: @background-color;
  box-shadow: 0 2px 4px 0 #000;
  z-index: 10;
  border-radius: 2px;
  .trade-chart-modal-title-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    justify-content: space-between;
    border-bottom: solid @border-color 1px;
    padding: 0 20px;
    color: @second-font-color;
    .trade-chart-modal-title-text {
      font-size: 16px;
    }
    .trade-chart-modal-title-close {
      display: inline-block;
      font-size: 24px;
      transition: all .2s;
      font-style: normal;
      cursor: pointer;
      &:hover {
        color: @main-font-color
      }
    }
  }
  .trade-chart-modal-content-container {
    display: flex;
    flex: 1;
    .trade-chart-modal-content-list-container {
      color: @second-font-color;
      font-size: 14px;
      .trade-chart-modal-content-list-row {
        line-height: 32px;
        height: 32px;
        transition: all .2s;
        padding: 0 20px;
        &:hover {
          background: @hover-background-color;
          color: @main-font-color;
        }
      }
    }
  }

  .trade-chart-modal-content-row-container {
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    font-size: 14px;
    color: @second-font-color;
    .trade-chart-modal-content-row-title {
      display: inline-block;
      width: 150px;
    }
  }
}

.trade-chart-modal-night {
  .trade-chart-modal(
    #1e222d,
    @main-font-color-night,
    @second-font-color-night,
    @border-color-night,
    @hover-background-color-night
  )
}


.trade-chart-modal-day {
  .trade-chart-modal(
    #ffffff,
    @main-font-color-day,
    @second-font-color-day,
    @border-color-day,
    @hover-background-color-day
  )
}
